<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/yxh.png" type="image/x-icon"/>
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet/less" href="./css/index.less">
</head>
<body>
    <div class="index">
        <div class="index-top" id="index-top">
            <img src="./img/logo.png">
            <div class="top-input">
                <div class="iconfont">
                    &#xe752;
                </div>
                <input type="text" id="top-input">
            </div>
            <div class="iconfont user">
                &#xe6a4;
            </div>
        </div>

        <a class="to-top" href="#index-top">
            <div class="iconfont">
                &#xeb6d;
            </div>
            Top
        </a>

        <div class="content-nav">
            <div class="con-nav con-nav-default">首页</div>
            <div class="con-nav con-nav-default">推荐</div>
            <div class="con-nav con-nav-default">排行</div>
            <div class="con-nav con-nav-default">找游戏</div>
            <div class="con-nav con-nav-default">论坛</div>
        </div>

        <div class="content">
            <div class="recommend">
                <img src="./img/recommend/meirenzhuan.jpg">
                <div class="red">
                    今日推荐
                </div>
                
                <div class="introduce">
                    <div>
                        <h1>游戏名称</h1>
                        <span>游戏简介</span>
                    </div>
                    
                </div>
            </div>

            <div class="game">
                <div class="game-nav">
                    <div class="img">
                        <img src="./img/navbar/paoku.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/heji.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/danji.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/tafang.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/nvsheng.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/wangyou.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/xiaoyouxi.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/chuangguan.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/huochairen.png">
                        <div>标题名</div>
                    </div>
                    <div class="img">
                        <img src="./img/navbar/mishitaotuo.png">
                        <div>标题名</div>
                    </div>
                </div>

                <div class="recently">
                    <div>
                        <div>最</div>
                        <div>近</div>
                        <div>在</div>
                        <div>玩</div>
                    </div>
                    <div>
                        <div class="img">
                            <img src="./img/game/game6.jpg">
                            <div>游戏名</div>
                        </div>
                        <div class="img">
                            <img src="./img/game/game5.jpg">
                            <div>游戏名</div>
                        </div>
                    </div>
                </div>

                <div class="game-list">
                    <div class="game-con">
                        <div>
                            <img src="./img/game/game1.jpg">
                            <div>
                                <div>游戏名</div>
                                <div>介绍</div>
                            </div>
                        </div>
                        <div>开始玩</div>
                    </div>

                    <div class="game-con">
                        <div>
                            <img src="./img/game/game2.jpg">
                            <div>
                                <div>游戏名</div>
                                <div>介绍</div>
                            </div>
                        </div>
                        <div>开始玩</div>
                    </div>

                    <div class="game-con">
                        <div>
                            <img src="./img/game/game3.jpg">
                            <div>
                                <div>游戏名</div>
                                <div>介绍</div>
                            </div>
                        </div>
                        <div>开始玩</div>
                    </div>

                    <div class="game-con">
                        <div>
                            <img src="./img/game/game4.jpg">
                            <div>
                                <div>游戏名</div>
                                <div>介绍</div>
                            </div>
                        </div>
                        <div>开始玩</div>
                    </div>
                </div>

                <div class="game-two">
                    <div class="img">
                        <img src="./img/recommend/game.jpg">
                        <div>最新推荐</div>
                    </div>
                    <div class="game-list">
                        <div class="game-con">
                            <div>
                                <img src="./img/game/game3.jpg">
                                <div>
                                    <div>游戏名</div>
                                    <div>介绍</div>
                                </div>
                            </div>
                            <div>开始玩</div>
                        </div>
                        <div class="game-con">
                            <div>
                                <img src="./img/game/game5.jpg">
                                <div>
                                    <div>游戏名</div>
                                    <div>介绍</div>
                                </div>
                            </div>
                            <div>开始玩</div>
                        </div>
                        <div class="game-con">
                            <div>
                                <img src="./img/game/game1.jpg">
                                <div>
                                    <div>游戏名</div>
                                    <div>介绍</div>
                                </div>
                            </div>
                            <div>开始玩</div>
                        </div>
                        <div class="game-con">
                            <div>
                                <img src="./img/game/game2.jpg">
                                <div>
                                    <div>游戏名</div>
                                    <div>介绍</div>
                                </div>
                            </div>
                            <div>开始玩</div>
                        </div>
                    </div>
                </div>

                <div class="pc">
                    <div>
                        <h1>经典电脑页游手机畅玩</h1>
                    </div>
                    <div>
                        <img src="./img/pc/01.jpg">
                        <img src="./img/pc/02.jpg">
                        <img src="./img/pc/03.jpg">
                        <img src="./img/pc/04.jpg">
                    </div>
                    
                </div>

                <!-- <div class="game-mesh">
                    <div></div>
                    <div>
                        <div>
                            <div class="img">
                                <img src="./img/game/game1.jpg">
                                <div></div>
                            </div>
                            <div class="img">
                                <img src="./img/game/game2.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game3.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game4.jpg">
                            </div>
                        </div>
                        <div>
                            <div class="img">
                                <img src="./img/game/game1.jpg">
                                <div></div>
                            </div>
                            <div class="img">
                                <img src="./img/game/game2.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game3.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game4.jpg">
                            </div>
                        </div>
                        <div>
                            <div class="img">
                                <img src="./img/game/game1.jpg">
                                <div></div>
                            </div>
                            <div class="img">
                                <img src="./img/game/game2.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game3.jpg">
                            </div>
                            <div class="img">
                                <img src="./img/game/game4.jpg">
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</body>
</html>

<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script>
    /**
     * 这个函数是点击dom就选中dom，根据类名修改样式
     * 第一个是循环的dom
     * 第二个是固定类名
     * 第三个是旧类名
     * 第四个是新类名
     * 第五个是是否要设置初始选中（默认false）
     * 第六个是默认初始选中
    */
    function selectDom(domArr, fixedClass, domClass, domNewClass, isDefault = false, index = 0) {
        if (isDefault) {
            domArr[index].className = domNewClass;
        }
        
        domArr.forEach((element, index) => {
            element.addEventListener('click',() => {
                // 先循环给默认再给点击的样式
                domArr.forEach(element2 => {
                    element2.className = `${fixedClass} ${domClass}`;
                })
                element.className = `${fixedClass} ${domNewClass}`;
            });
        });
    }
</script>
<script>
    let conNav = document.getElementsByClassName('con-nav');
    let conNavDom = [...conNav];

    selectDom(conNavDom, 'con-nav', 'con-nav-default', 'con-nav-click', true);
</script>